<template>
	<view class="bg-light">
		<uni-swiper-dot style="height: 700rpx;" @clickItem=clickItem :info="jyxqList.Swiper" :current="current"
			:mode="mode" :dots-styles="dotsStyles" field="content">
			<swiper :autoplay="true" circular class="swiper-box w-100" style="height: 700rpx;" @change="change"
				:current="swiperDotIndex">
				<swiper-item v-for="(item, index) in jyxqList.Swiper" :key="index">
					<view class="swiper-item" style="height: 100%;" :class="'swiper-item' + index">
						<image class="w-100" style="height: 100%;" :src="Domain_IMG + item.Picture_Url" mode=""></image>
					</view>
				</swiper-item>
			</swiper>
		</uni-swiper-dot>
		<view class="p-2 mt">
			<view class="bg-white " style="border-radius: 20rpx;">
				<!-- <view class="text-center">
					<text class="font-weight-bold font-lg" :class="'text-'+color">商品详情</text>
				</view> -->
				<view class="flex flex-column p-2 ">
					<view :class="'text-'+color" class="font-weight-bold mb-2" style="color: red;">
						<text class="font-md">￥{{specifications[specificationsNum].Sales_Unit_Price}}</text>
						<text>/斤</text>
					</view>
					<view class="flex">
						<text class="font-weight-bold mr-4 ml-1 mb-2">{{jyxqList.Article_Name}}</text>
						<text>{{jyxqList.Category_Name}}</text>
					</view>
					<view class=" mb-2 flex justify-center">
						<view class="underline flex">

						</view>
					</view>
					<view class=" " style="color: #aaa;">
						<text class="mr-4 ml-1">已售:{{jyxqList.Stock_Sell}}</text>
						<text>库存:{{specifications[specificationsNum].Stock_Remain}}</text>
					</view>
				</view>
			</view>
		</view>
		<view class="p-2 pt">
			<view class="p-2 bg-white" style="border-radius: 20rpx;">
				<view class="">
					<text class="font-weight-bold font ml-1" style="">商品规格/价格</text>
				</view>
				<view class="flex mt-2" style="flex-wrap: wrap;">
					<view @click="SelectActive(i)" v-for="(item,i) in specifications" :key="i"
						class="bg-success ml-1 text-white font-sm p-1"
						:class="(active==i?'bg-'+color+' '+'text-white':'')" style="border-radius: 20rpx;">
						{{item.Specifications_Name}}
					</view>
				</view>
				<view class="">
					<view :class="'text-'+color" class="font-weight-bold mt-2" style="color: red;">
						<text class="font">￥{{specifications[specificationsNum].Sales_Unit_Price}}</text>
						<text>/斤</text>
					</view>
				</view>
				<view class="">
					<text class="ml-1 font-sm">1斤起</text>
				</view>
			</view>
		</view>
		<view class="p-2">
			<view class="p-2 bg-white " style="border-radius: 20rpx;">
				<view class="text-center">
					<text class="font-weight-bold font-lg" :class="'text-'+color">产业服务介绍:</text>
				</view>
				<view class="flex mt-2 flex-column">
					<text
						class="mt-2 text-secondary">1.黑木耳是一种营养丰富的食品，具有多种食用价值和保健功能。随着人们对健康饮食的关注日益提高，黑木耳市场需求不断扩大。为了满足这一需求，我们提供全面的黑木耳产业服务，涵盖种植、加工、销售等多个环节。</text>
					<text
						class="mt-2 text-secondary">2.我们引进先进的黑木耳加工设备，采用独特的工艺流程，确保产品口感与营养价值的同时，提高产品附加值。此外，我们还提供专业的储存建议，确保黑木耳产品的品质和安全</text>
					<text
						class="mt-2 text-secondary">3.我们致力于优化黑木耳产业的供应链管理，确保原材料采购、产品加工、物流配送等环节的高效运转。通过信息化手段和合作伙伴的协同，实现供应链的透明化和实时监控，降低运营成本</text>
				</view>
			</view>
		</view>
		<view class="p-2 mt-2">
			<view class="p-2 bg-white" style="border-radius: 20rpx;">
				<view class="text-center">
					<text class="font-weight-bold font-lg" :class="'text-'+color">产业标准化技术:</text>
				</view>
				<view class="flex mt-2 flex-column">
					<text class="mt-2 text-secondary">1.制定标准：由政府或行业协会组织制定黑木耳产业的标准</text>
					<text class="mt-2 text-secondary">2.宣传推广：通过各种渠道宣传推广黑木耳产业的标准，提高从业人员的认知度和重视程度</text>
					<text class="mt-2 text-secondary">3.技术培训：开展技术培训，提高从业人员的业务水平和技术能力，使其能够更好地执行标准</text>
					<text class="mt-2 text-secondary">4.检查监督：对黑木耳产业的标准执行情况进行检查监督，对不符合标准的行为进行处罚。</text>
				</view>
			</view>
		</view>
		<view class="">
			<image v-if="DetailPic.length!=0" class="w-100" v-for="(item,i) in DetailPic" :key="i"
				:src="Domain_IMG + item.Picture_Url" mode=""></image>
		</view>
		<view class="" style="height: 100rpx;">

		</view>
		<view v-if="bottom" @click="trigger" class="bg-white flex align-center justify-center" style="position: fixed;bottom: 200rpx;width: 100rpx;height: 100rpx;right: 50rpx;box-shadow: 0 0 10rpx rgba(0,0,0,.5);border-radius: 50%;">
			<view style="width: 80%;height: 80%;">
				<image class="w-100 h-100" src="../../static/icon/gotop.png" mode=""></image>
			</view>
		</view>
		<view class="flex justify-between align-center bg-white fixed-bottom p-2">
			<view class="flex align-center">
				<uni-icons type="cart" size="30"></uni-icons>
				<text class="mr-2" :class="'text-'+color" style="color: black;">购买数量:</text>
				<uni-number-box :min="1" :max="Number(specifications[specificationsNum].Stock_Remain)" v-model="num" />
			</view>
			<view class="">
				<button @click="goOrder()" class="uni-button" type="primary" size="mini" style="background-color: red;">立即购买</button>
			</view>
		</view>
	</view>
</template>

<script>
	const app = getApp()
	export default {
		data() {
			return {
				bottom:false,
				color: uni.getStorageSync('ThemeColors') ? uni.getStorageSync('ThemeColors') : 'green',
				info: [],
				dotStyle: [],
				pattern:{
					buttonColor: '#ffffff',
					color:'#000',
					icon:'top'
				},
				horizontal:"right",
				vertical:'top',
				modeIndex: -1,
				styleIndex: -1,
				current: 0,
				mode: 'default',
				dotsStyles: {},
				swiperDotIndex: 0,
				token: '',
				Article_SerialNumber: '',
				Domain_IMG: app.globalData.Domain_IMG,
				jyxqList: {
					Swiper: [],
				},
				specifications: [{
					Sales_Unit_Price: ''
				}],
				active: 0,
				specificationsNum: 0,
				DetailPic: [],
				max: 0,
				num: 1,
				LoginUrl: '',
			};
		},
		onLoad(e) {
			this.getshowList(e.Article_SerialNumber, e.Sales_Unit_Price_SerialNumber)
			this.Article_SerialNumber = e.Article_SerialNumber
			this.Store_SerialNumber = e.Store_SerialNumber
			this.token = uni.getStorageSync('token')
		},
		onReachBottom() {
			this.bottom = true
		},
		methods: {
			SelectActive(i) {
				this.active = i
				this.specificationsNum = i
			},
			getshowList(Article_SerialNumber, Sales_Unit_Price_SerialNumber) {
				uni.request({ //获取点击的分享者传给服务器
					url: app.globalData.Domain_Name + '/getGroupGoodsDetail',
					header: {
						'Content-Type': 'application/x-www-form-urlencoded'
					},
					method: "POST",
					data: {
						Article_SerialNumber,
						Sales_Unit_Price_SerialNumber,
					},
					success: (res) => {
						console.log(res.data);
						this.jyxqList = res.data.Data
						this.specifications = res.data.Data.specifications
						this.DetailPic = res.data.Data.Detail
					}
				})
			},
			change(e) {
				this.current = e.detail.current
			},
			goOrder() {
				if (this.token == '') {
					uni.showModal({
						title: '登录已失活',
						content: '系统检测到您未登录或登录超时',
						cancelText: '暂不登录',
						confirmText: '去登陆',
						success(res) {
							if (res.cancel) {
								uni.switchTab({
									url: '/pages/index/index'
								})
							}
							if (res.confirm) {
								let pages = getCurrentPages();
								this.LoginUrl = pages[pages.length - 1].$page.fullPath
								uni.navigateTo({
									url: '/pages/My/Login?LoginUrl=' + this.LoginUrl
								})
							}
						}
					})
					return
				}
				let specificationsNum = this.specificationsNum
				let obj = {
					Article_SerialNumber: this.Article_SerialNumber,
					Sales_Unit_Price_Stock_SerialNumber: this.specifications[specificationsNum]
						.Sales_Unit_Price_Stock_SerialNumber,
					Store_SerialNumber: this.Store_SerialNumber,
					Article_Name: this.jyxqList.Article_Name,
					Picture_URL: this.jyxqList.Picture_URL,
					Unit_Price: this.specifications[specificationsNum].Unit_Price,
					specifications: '固始鸡',
					quantity: this.num,
					Specifications_Name: this.specifications[specificationsNum].Specifications_Name,
					Sales_Unit_Price: this.specifications[specificationsNum].Sales_Unit_Price,
					Article_Specifications_SerialNumber: this.specifications[specificationsNum]
						.Article_Specifications_SerialNumber
				}
				uni.navigateTo({
					url: `/pages/index/GoodsOrder?SalesOrder=${encodeURIComponent(JSON.stringify([obj]))}`
				})
			},
			trigger(){
				console.log(1)
				uni.pageScrollTo({
					scrollTop:0
				})
			}
		}
	}
</script>

<style lang="scss">
	.activeItem {
		background-color: #fc7c08;
	}
	.underline {background-color: #aaa;height: 1px;width: 100%;}
</style>